<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>刷卡无忧</title>
<link rel="stylesheet" href="static/font/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap-grid.min.css"/>
<link rel="stylesheet" href="static/css/weui.css"/>
<link rel="stylesheet" href="static/css/example.css"/>
<link rel="stylesheet" type="text/css" href="static/css/tool.css"/>
<link rel="stylesheet" type="text/css" href="static/css/style.css"/>
<link rel="stylesheet" type="text/css" href="static/css/cover.css"/>
<title></title>
</head>
<body>
<section>
	<header class="pr head">
		<a href="javascript:;" class="white f16"><i class="iconfont icon-fanhui white f18"></i>登录</a>
		<h2 class="t_c white fn">实名认证</h2>
	</header>
	<div class="warp mt_3">
		<div class="verified_box">
			<div class="process4" style="background: #c9c9c9;">
				<p class="f14">1</p>
			</div>
			<p class="process_text1">身份信息</p>
		</div>
		<div class="process_line"></div>
		<div class="verified_box">
			<div class="process4">
				<p class="f14">2</p>
			</div>
			<p class="process_text1">实名信息</p>
		</div>
		<div class="process_line"></div>
		<div class="verified_box">
			<div class="process1">
				<div class="process2"></div>
				<div class="process3"></div>
				<p class="f14">3</p>
			</div>
			<p class="process_text">收款信息</p>
		</div>
		<div class="process_line"></div>
		<div class="verified_box">
			<div class="process4" style="background: #c9c9c9;">
				<p class="f14">4</p>
			</div>
			<p class="process_text1">身份验证</p>
		</div>
	</div>
	<div class="clear"></div>
	<div class="weui-cells weui-cells_form">
	    <div class="weui-cell weui-cell_warn">
	        <div class="weui-cell__hd"><label for="" class="weui-label">卡号</label></div>
	        <div class="weui-cell__bd">
	            <input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号"/>
	        </div>
	        <div class="weui-cell__ft">
	            <i class="weui-icon-warn"></i>
	        </div>
	    </div>
	</div>
	<div class="weui-cells weui-cells_form">
	    <div class="weui-cell">
	    	<label class="pr"><i class="iconfont icon-jinrongjielogo- color_red"></i></label>
	        <div class="weui-cell__bd">
	            <input class="weui-input pl_4" id="showPicker" type="text" pattern="[0-9]*" readonly lectable="on" value="" placeholder="请选择银行"/>
	        </div>
	    </div>
   	</div>
	<div class="weui-cells weui-cells_form">
	    <div class="weui-cell">
	        <div class="weui-cell__hd"><label class="weui-label">开户省份</label></div>
	        <div class="weui-cell__bd">
	            <input class="weui-input pl_1" id="cityPicker" type="text" pattern="[0-9]*" readonly lectable="on" value="" placeholder="开户省份"/>
	        </div>
	        <div class="weui-cell__ft">
	            <i class="weui-icon-warn"></i>
	        </div>
	    </div>
    </div>
    <a href="javascript:;" class="weui-btn weui-btn_warn m_2">下一步</a>
</section>
<script src="static/js/zepto.min.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="static/js/example.js"></script>
<script type="text/javascript">
    $(function(){
        $('#showPicker').on('click', function () {
	        weui.picker([{
	            label: '飞机票',
	            value: 0
	        }, {
	            label: '火车票',
	            value: 1
	        }, {
	            label: '的士票',
	            value: 2
	        },{
	            label: '公交票 (disabled)',
	            disabled: true,
	            value: 3
	        }, {
	            label: '其他',
	            value: 4
	        }], {
	            onChange: function (result) {
	                console.log(result);
	            },
	            onConfirm: function (result) {
	                console.log(result);
	            }
	        });
	    });
    });  
</script>
<script>
	$("#cityPicker").click(function(){
    	weui.picker([
		{
		    label: '广东',
	        value: 0,
	        children: [{
	            label: '广州',
	            value: 0,
	            children: [{
	                label: '海珠',
	                value: 0
	            }, {
	                label: '番禺',
	                value: 1
	            }]
	        }, {
	            label: '佛山',
	            value: 1,
	            children: [{
	                label: '禅城',
	                value: 0
	            }, {
	                label: '南海',
	                value: 1
	            }]
	        }]
	    }, {
	        label: '广西',
	        value: 1,
	        children: [{
	            label: '南宁',
	            value: 0,
	            children: [{
	                label: '青秀',
	                value: 0
	            }, {
	                label: '兴宁',
	                value: 1
	            }]
	        }, {
	            label: '桂林',
	            value: 1,
	            children: [{
	                label: '象山',
	                value: 0
	            }, {
	                label: '秀峰',
	                value: 1
	            }]
	        }]
	    }], {
		   className: 'custom-classname',
		   defaultValue: [1, 3],
		   onChange: function (result) {
		       console.log(result)
		   },
		   onConfirm: function (result) {
		       console.log(result)
		   },
		   id: 'doubleLinePicker'
		});
    })	
</script>
</body>
</html>
